<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<script src="js/vue.js"></script>
    </head>
	<style>
		* {
		    box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		html,
		body {
		
		    width: 100%;
		    min-width: 1176px;
		    min-height: 1200px;
		    font-size: 16px;
		    margin: auto;
		    background-color: #F4F6FA;
		    font-weight: 400;
		    font-family: Helvetica, sans-serif;
		}
		#site-headline {
		    padding-top: 2rem;
		    background-image: linear-gradient(120deg, #b8daee 30%, rgb(29, 140, 252) 46%, #d2d7f8 70%);
		    -webkit-background-clip: text;
		    background-clip: text;
		    -webkit-text-fill-color: transparent;
		    font-size: 1.6rem;
		    font-weight: 600;
		    text-align: center;
		    letter-spacing: .2rem;
		}
		table{
			width: 1200px;
			background-color: #fff;
			margin: 20px auto;
		}
		tr{
			margin-bottom: 10px;
		}
		td{
			padding: 10px;
			font-size: 16px;
			color: #333;
			border-bottom: 1px dashed #ddd;
		}
		.thead td{
			font-weight: 600;
		}
		.num button{
			    width: 1.6rem;
			    height: 1.6rem;
			    color: #666;
			    font-size: 1.4rem;
			    text-align: center;
			    line-height: 1.6rem;
				border: none;
		}
		.num input{
			    height: 1.6rem;
			    width: 3rem;
			    text-align: center;
			    color: #555;
			    font-size: .9rem;
			    border: 1px solid #ddd;
				position: relative;
				top: -2px;
				outline: none;
		}
		td span{
			color: #999;
			font-size: 13px;
		}
		.price{
			color: red;
			font-weight: 600;
		}
		input[type='checkbox']{
			margin-right: 5px;
		}
		.del{
			font-weight: 600;
			color: brown;
			cursor: pointer;
		}
	</style>
    <body>
		<h1 id="site-headline">Vue购物车结算</h1>
		<table>
			<tr class="thead">
				<td><label><input @change="allCheck" v-model="check" type="checkbox">全选</label></td>
				<td colspan="3" align="right">单价(元)</td>
				<td align="center">数量</td>
				<td>小计(元)</td>
				<td style="cursor: pointer;color: skyblue;">编辑</td>
			</tr>
			<template v-for='(item,index) in shopList'>
				<tr><td colspan="7"><input @change="shopCheck(index,item.check)" v-model="item.check" type="checkbox">{{item.shop}}</td></tr>
				<tr v-for='(goods,i) in item.list'>
					<td><input @change="goodsCheck(index,goods.check)" v-model="goods.check" type="checkbox"></td>
					<td style="width: 120px;"><img width="100%" :src="goods.img" alt="" /></td>
					<td>{{goods.title}}</td>
					<td class="price">￥{{goods.title}}</td>
					<td class="num">
						<button @click="goods.num>1 ? goods.num-- : ''" >-</button>
						<input type="text" v-model.number="goods.num">
						<button @click="goods.num++">+</button>
						</td>
					<td class="price">￥{{(goods.price*goods.num).toFixed(2)}}</td>
					<td><button @click="del(index, i)">删除</button></td>
				</tr>
			</template>
			<tr>
				<td><label><input @change="allCheck" v-model="check" type="checkbox">全选</label></td>
				<td class="del"@click="del(-1)">删除选中商品</td>
				<td>共有{{total}}件商品,已选择 <b>{{checkNum}}</b> 件</td>
				<td align="right" colspan="4">合计： <b class="price" style="font-size: 18px;">￥500.00</b></td>
			</tr>
		</table>
		<script src="js/shopCar.js"></script>
	</body>
</html>